import React, { Component } from 'react';
import { Link, NavLink, Route, Routes, Navigate } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Header from './components/Header';
import MyNavLink from './components/MyNavLink';
import News from './pages/Home/News';
import Message from './pages/Home/Message';
import Details_param from './pages/Home/Message/Details_param';
import Details_search from './pages/Home/Message/Details_search';
import Details_state from './pages/Home/Message/Details_state'

class App extends Component {
    render() {
        return (
            <div>
                <div className='row'>
                    <div className='col-xs-offset-2 col-xs-8'>
                        <div className='page-header'>
                            <Header />
                        </div>
                    </div>
                </div>
                <div className='row'>
                    <div className='col-xs-offset-2 col-xs-2'>
                        <div className='list-group'>
                            {/* 原生html中，靠<a>跳转不同的页面 */}
                            {/* <a className='list-group-item' href="./about.html">About</a> */}
                            {/* <a className='list-group-item active' href="./home.html">Home</a> */}

                            {/* 在React中靠路由链接实现切换组件 -- 编写路由链接 */}
                            {/* <Link className='list-group-item' to="/about">About</Link> */}
                            {/* <Link className='list-group-item' to="/home">Home</Link> */}

                            {/* NavLink切换导航栏, 但是略繁琐, 最好自行封装 */}
                            {/* <NavLink className={({ isActive }) => {return isActive ? "list-group-item highlight" : "list-group-item"}} to="/about">About</NavLink> */}
                            {/* <NavLink className={({ isActive }) => {return isActive ? "list-group-item highlight" : "list-group-item"}} to="/home">Home</NavLink> */}

                            {/* 封装MyNavLink, 标签体作为标签属性children传给props */}
                            <MyNavLink to="/about">About</MyNavLink>
                            <MyNavLink to="/home">Home</MyNavLink>
                        </div>
                    </div>
                    <div className='col-xs-6'>
                        <div className='panel'>
                            <div className='panel-body'>
                                {/* 注册路由, Routes提高匹配效率(单一匹配), v6默认所有路径匹配为精准匹配, 并且默认支持相对路径写法, 则path="about" */}
                                <Routes>
                                    <Route path='about' element={<About />} />
                                    {/* 嵌套路由 */}
                                    <Route path='home/*' element={<Home />} >
                                        <Route path='news' element={<News />} />
                                        <Route path='message' element={<Message />}>
                                            {/* 冒号: 相当于占位符, 声明接收params参数(/:param) */}
                                            <Route path='details_param/:id/:title' element={<Details_param />}/>
                                            <Route path='details_search' element={<Details_search />}/>
                                            {/* replace 路由替换跳转, 无痕 */}
                                            <Route path='details_state' element={<Details_state />}/>
                                        </Route>
                                    </Route>
                                    {/* Navigate, 地址重定向, 没有匹配的路由时, 默认跳转到Navigate指定的路由("/home") */}
                                    <Route path="*" element={<Navigate to="home" />} />
                                </Routes>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;